<style lang="less" scoped>
	.topTips {
		position: fixed;
		top: 66px;
		right: 10px;
		width: 55%;
		font-size: 24rpx;
		color: #333333;
		background: rgba(255, 255, 255, 0.8);
		z-index: 999;
		padding: 15rpx;
		border-radius: 10rpx;
		.bds {
			display: flex;
			.left {
				flex: 6;
				.span {
					display: inline-block;
					font-size: 38rpx;
					font-weight: 700;
				}
			}
			.right {
				flex: 1;
				padding-top: 20rpx;
				text-align: center;
				position: relative;
				.icon {
					width: 20px;
					height: 20px;
					background: #F8F8F8;
					align-items: center;
					justify-items: center;
					border-radius: 50%;
				}
			}
		}
		.ups {
			width:0;
			height:0;
			border-right:8px solid transparent;
			border-left:8px solid transparent;
			border-bottom:8px solid rgba(255, 255, 255, 0.8);
			position: absolute;
			top: -6px;
			right: 25%;
		}
	}
</style>
<template>
	<div class="topTips animated fadeInDown" v-if="showTips">
		<div class="rand">
			<span class="ups animated fadeInUp delay-2s" :style="{right:`${right}%`}"></span>
		</div>
		<div class="bds">
			<div class="left">点击 ".<div class="span">.</div>." 可添加到我的小程序<br/>{{ text }}</div>
			<div class="right" @tap="closeTips">
				<img src="http://img.he29.com/api/png/350fd2fe97627934f259bebc6c07acbf.png" class="icon">
			</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/4/5
	 * Time: 15:06
	 * Description:
	 */
	export default {
		name: 'toAdd',
		props : {
			text:{
				type: String,
				default: `打开微信下拉即可快速访问`
			},
			right:{
				type: Number,
				default: 25
			},
			bottom:{
				type: Boolean,
				default: false
			},
			close:{
				type: Number,
				default: 6000
			},
		},
		data() {
			return {
				showTips: true,
				times: null,
				key: `user_closeadds`
			}
		},
		computed: {},
		watch: {
			close () {
				this.autoClose();
			}
		},
		components: {},
		methods: {
			closeTips() {
				this.$cache.set(this.key, 1)
				this.showTips = !this.showTips;
			},
			autoClose () {
				// TODO 小于 等于0 则不自动关闭
				if (this.close > 0) {
					this.times = setTimeout(()=> {
						this.closeTips();
					}, this.close);
				}
			}
		},
		created () {
			const keys = Number(this.$cache.get(this.key));
			if (keys === 1) {
				this.showTips = false;
			}
		},
		beforeDestroy (){
			clearInterval(this.times);
		},
	}
</script>
